<template>
  <div id="center">
    <div class="up">
      <div class="bg-color-black item" v-for="item in titleItem" :key="item.title">
        <p class="ml-3 colorBlue fw-b fs-xl">{{ item.title }}</p>
        <div>
          <dv-digital-flop class="dv-dig-flop ml-1 mt-2 pl-3" :config="item.number" />
        </div>
      </div>
    </div>
    <div class="down">
      <div class="ranking bg-color-black">
        <span>
          <icon name="chart-pie" class="text-icon"></icon>
        </span>
        <span class="fs-xl text mx-2 mb-1 pl-3">镇活跃度</span>
        <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="TownActivity" />
      </div>
      <div class="ranking bg-color-black">
        <span>
          <icon name="chart-pie" class="text-icon"></icon>
        </span>
        <span class="fs-xl text mx-2 mb-1 pl-3">村活跃度</span>
        <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="VillageActivity" />
      </div>
    </div>
  </div>
</template>

<script>

import { getData, queryVillageActivity, queryTownActivity, queryFunds } from "../api/index.js";

export default {
  data() {
    return {
      titleItem: [
        {
          title: '群众访问量',
          number: {
            number: [],
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 26
            }
          }
        },
        {
          title: '三务数据量',
          number: {
            number: [],
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 26
            }
          }
        },
        {
          title: '三资数据量',
          number: {
            number: [],
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 26
            }
          }
        },
        {
          title: '群众反馈量',
          number: {
            number: [],
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 26
            }
          }
        },
        {
          title: '系统活跃度',
          number: {
            number: [],
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 26
            }
          }
        },
        {
          title: '信息公示量',
          number: {
            number: [],
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 26
            }
          }
        }
      ],
      ranking: {
        data: [
          {
            name: '周口',
            value: 55
          },
        ],
        carousel: 'single',
        unit: '人'
      },
      VillageActivity: {
        data: [
          {
            name: '',
            value: ''
          },
        ],
      },
      TownActivity: {
        data: [
          {
            name: '',
            value: ''
          },
        ],
      },
      data: "",
      water: {
        data: [24, 45],
        shape: 'roundRect',
        formatter: '{value}%',
        waveNum: 3
      },
    }
  },
  created() {
    this.getCenterData()
  },
  methods: {
    getCenterData() {
      let that = this;
      getData().then(res => {
        for (let index = 0; index < that.titleItem.length; index++) {
          that.titleItem[index].number.number = []
        }
        that.titleItem[0].number.number.push(res.data.audienceVisits)
        that.titleItem[1].number.number.push(res.data.dataVolumeThreeResources)
        that.titleItem[2].number.number.push(res.data.informationDisclosureQuantity)
        that.titleItem[3].number.number.push(res.data.massFeedbackQuantity)
        that.titleItem[4].number.number.push(res.data.systemActivity)
        that.titleItem[5].number.number.push(res.data.tripartiteDataVolume)
        for (let index = 0; index < that.titleItem.length; index++) {
          that.titleItem[index].number = { ...that.titleItem[index].number }
        }
      })
      queryVillageActivity().then(res => {
        that.VillageActivity.data = []
        res.data.forEach(index => {
          that.VillageActivity.data.push({
            name: index.villageName,
            value: index.activityNum
          });
        });
        that.VillageActivity = { ...that.VillageActivity }
      })
      queryTownActivity().then(res => {
        that.TownActivity.data = []
        res.data.forEach(index => {
          that.TownActivity.data.push({
            name: index.townName,
            value: index.activityNum
          });
        });
        that.TownActivity = { ...that.TownActivity }
      })
      queryFunds().then(res => {
        console.log(res)
      })
    }
  },
  components: {
  },

}
</script>

<style lang="scss" scoped>
#center {
  display: flex;
  flex-direction: column;
  .up {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .item {
      border-radius: 6px;
      padding-top: 8px;
      margin-top: 8px;
      width: 32%;
      height: 70px;
      .dv-dig-flop {
        width: 150px;
        height: 30px;
      }
    }
  }
  .down {
    padding: 6px 4px;
    padding-bottom: 0;
    width: 100%;
    display: flex;
    height: 255px;
    justify-content: space-between;
    .bg-color-black {
      border-radius: 5px;
    }
    .ranking {
      padding: 10px;
      width: 59%;
      .dv-scr-rank-board {
        height: 225px;
      }
    }
    .percent {
      width: 40%;
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 50%;
        height: 120px;
        span {
          margin-top: 8px;
          font-size: 14px;
          display: flex;
          justify-content: center;
        }
      }
      .water {
        width: 100%;
        .dv-wa-le-po {
          height: 120px;
        }
      }
    }
  }
}
</style>
